<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2016/1/4 0004
  Time: 上午 10:23
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<html>
<head>
<title>实体办税厅窗口满意度分析</title>
</head>
<body>
	<div class="content-wrapper">
		<h3>实体办税厅窗口满意度分析</h3>
		<div class="row">
			<div class="col-sm-12">
				<div class="panel widget col-sm-4 padding0">
					<div class="row row-table">
						<div class="row row-table bg-green">
							<div class="col-xs-3 text-center bg-green-dark  pv-lg">
								<em class="icon-emoticon-smile fa-3x"></em>
							</div>
							<div class="col-xs-9 pv-lg">
								<div class="h2 mt0">92%</div>
								<div class="text-uppercase">实体办税厅窗口满意率</div>
								<hr />
								<div class="row">
									<div class="col-xs-6">
										<div class="h4 mt0">5人</div>
										<div style="font-size: 10px;">排队人数</div>
									</div>
									<div class="col-xs-6">
										<div class="h4 mt0">3分钟</div>
										<div style="font-size: 10px;">平均等待时长</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-sm-12">
				<div class="panel panel-default">
					<div class="panel-heading"></div>
					<div class="panel-body">
						<div id="chart1" style="height: 450px;"></div>
					</div>
				</div>
			</div>
		</div>

		<div class="row">
			<div class="col-sm-12">
				<div class="panel panel-default">
					<div class="panel-heading"></div>
					<div class="panel-body">
						<div id="chart2" style="height:190px"></div>
						<div id="chart3" style="height:190px;padding-top:1px;border-top-width:0"></div>
					</div>
				</div>
			</div>
		</div>

	</div>


	<script>
		var dataMap = {};
		var initReportData = function(obj) {
			var pList = [ '南京', '苏州', '无锡', '徐州', '泰州', '连云港', '南通', '淮安',
					'盐城', '扬州', '镇江', '宿迁', '常州' ];
			var temp;
			var max = 0;
			for (var m = 1; m <= 12; m++) {
				temp = obj[m];
				for (var i = 0, l = temp.length; i < l; i++) {

					obj[m][i] = {
						value : temp[i]
					}
				}
				// obj[year+'max'] = Math.floor(max/100) * 100;
			}
			return obj;
		}
		dataMap.v = initReportData({
			1 : [ 200, 250, 280, 390, 500, 600, 400, 540, 480, 390, 540, 435,
					330 ],
			2 : [ 200, 250, 280, 390, 500, 600, 400, 540, 480, 390, 540, 435,
					330 ],
			3 : [ 200, 250, 280, 390, 500, 600, 400, 540, 480, 390, 540, 435,
					330 ],
			4 : [ 200, 250, 280, 390, 500, 600, 400, 540, 480, 390, 540, 435,
					330 ],
			5 : [ 200, 250, 280, 390, 500, 600, 400, 540, 480, 390, 540, 435,
					330 ],
			6 : [ 200, 250, 280, 390, 500, 600, 400, 540, 480, 390, 540, 435,
					330 ],
			7 : [ 200, 250, 280, 390, 500, 600, 400, 540, 480, 390, 540, 435,
					330 ],
			8 : [ 200, 250, 280, 390, 500, 600, 400, 540, 480, 390, 540, 435,
					330 ],
			9 : [ 200, 250, 280, 390, 500, 600, 400, 540, 480, 390, 540, 435,
					330 ],
			10 : [ 200, 250, 280, 390, 500, 600, 400, 540, 480, 390, 540, 435,
					330 ],
			11 : [ 200, 250, 280, 390, 500, 600, 400, 540, 480, 390, 540, 435,
					330 ],
			12 : [ 200, 250, 280, 390, 500, 600, 400, 540, 480, 390, 540, 435,
					330 ]
		});

		dataMap.v2 = initReportData({
			1 : [ 230, 340, 380, 490, 540, 600, 420, 640, 490, 410, 620, 535,
					430 ],
			2 : [ 230, 350, 380, 490, 540, 600, 420, 640, 490, 410, 620, 535,
					430 ],
			3 : [ 230, 355, 380, 490, 540, 700, 420, 640, 490, 410, 620, 535,
					430 ],
			4 : [ 230, 353, 380, 490, 540, 800, 420, 640, 490, 410, 620, 635,
					430 ],
			5 : [ 230, 351, 380, 490, 540, 900, 420, 640, 490, 410, 620, 735,
					430 ],
			6 : [ 230, 352, 380, 490, 540, 800, 420, 640, 490, 410, 620, 835,
					430 ],
			7 : [ 230, 353, 380, 490, 540, 700, 420, 640, 490, 410, 620, 635,
					430 ],
			8 : [ 230, 354, 380, 490, 540, 800, 420, 640, 490, 410, 620, 535,
					430 ],
			9 : [ 230, 355, 380, 490, 540, 900, 420, 640, 490, 410, 620, 635,
					430 ],
			10 : [ 230, 356, 380, 490, 540, 700, 420, 640, 490, 410, 620, 735,
					430 ],
			11 : [ 230, 357, 380, 490, 540, 800, 420, 640, 490, 410, 620, 835,
					430 ],
			12 : [ 230, 358, 380, 490, 540, 900, 420, 640, 490, 410, 620, 935,
					430 ]
		});

		dataMap.v3 = initReportData({
			1 : [ 69, 60, 68, 90, 95, 99, 65, 96, 70, 60, 90, 90, 95 ],
			2 : [ 69, 60, 68, 90, 95, 99, 65, 96, 70, 60, 90, 90, 95 ],
			3 : [ 65, 60, 68, 90, 95, 94, 65, 96, 70, 60, 90, 90, 95 ],
			4 : [ 69, 61, 68, 90, 95, 99, 66, 96, 70, 60, 90, 90, 95 ],
			5 : [ 70, 60, 68, 90, 95, 99, 65, 96, 70, 60, 90, 90, 95 ],
			6 : [ 69, 60, 68, 92, 95, 96, 65, 96, 70, 60, 92, 90, 95 ],
			7 : [ 71, 60, 68, 90, 95, 99, 65, 96, 70, 60, 90, 90, 95 ],
			8 : [ 69, 60, 68, 90, 95, 99, 63, 96, 70, 60, 93, 90, 95 ],
			9 : [ 69, 60, 68, 91, 95, 97, 65, 96, 70, 60, 90, 90, 95 ],
			10 : [ 72, 60, 68, 90, 95, 99, 67, 96, 70, 60, 90, 90, 95 ],
			11 : [ 69, 60, 68, 90, 95, 98, 65, 96, 70, 60, 90, 90, 95 ],
			12 : [ 69, 60, 68, 90, 95, 99, 68, 96, 70, 60, 90, 90, 95 ]
		});

		dataMap.v4 = initReportData({
			1 : [ 45, 55, 45, 20, 15, 10, 45, 40, 35, 50, 22, 25, 26 ],
			2 : [ 45, 55, 45, 20, 15, 10, 45, 40, 35, 50, 22, 25, 26 ],
			3 : [ 45, 55, 45, 20, 15, 10, 45, 40, 35, 50, 22, 25, 26 ],
			4 : [ 45, 55, 45, 20, 15, 10, 45, 40, 35, 50, 22, 25, 26 ],
			5 : [ 45, 55, 45, 20, 15, 10, 45, 42, 35, 50, 22, 25, 26 ],
			6 : [ 45, 55, 45, 20, 15, 10, 45, 44, 35, 50, 22, 25, 26 ],
			7 : [ 45, 55, 45, 20, 15, 10, 45, 40, 35, 50, 22, 25, 26 ],
			8 : [ 45, 55, 45, 20, 15, 10, 45, 45, 35, 50, 22, 25, 26 ],
			9 : [ 45, 55, 45, 20, 15, 10, 45, 40, 35, 50, 22, 25, 26 ],
			10 : [ 45, 55, 45, 20, 15, 10, 45, 40, 35, 50, 22, 25, 26 ],
			11 : [ 45, 55, 45, 20, 15, 10, 45, 40, 35, 50, 22, 25, 26 ],
			12 : [ 45, 55, 45, 20, 15, 10, 45, 40, 35, 50, 22, 25, 26 ]
		});

		//chart1
		var chartOption1 = {

			timeline : {
				data : [ '2015-01-01', '2015-02-01', '2015-03-01',
						'2015-04-01', '2015-05-01', '2015-06-01', '2015-07-01',
						'2015-08-01', '2015-09-01', '2015-10-01', '2015-11-01',
						'2015-12-01' ],
				label : {
					formatter : function(s) {
						return s.slice(5, 7) + '月';
					}
				},
				autoPlay : true,
				playInterval : 1000
			},

			options : [
					{
						title : {
							text : '月业务数量分城市统计',
							subtext : ''
						},
						tooltip : {
							trigger : 'axis'
						},
						legend : {
							data : [ '月服务人次', '月办理业务数量' ]
						},
						calculable : true,
						grid : {
							'y' : 80,
							'y2' : 100
						},
						xAxis : [
								{
									type : 'category',
									data : [ '南京', '苏州', '无锡', '徐州', '泰州',
											'连云港', '南通', '淮安', '盐城', '扬州',
											'镇江', '宿迁', '常州' ]
								},
								{
									type : 'category',
									axisLine : {
										show : false
									},
									axisTick : {
										show : false
									},
									axisLabel : {
										show : false
									},
									splitArea : {
										show : false
									},
									splitLine : {
										show : false
									},
									data : [ '南京', '苏州', '无锡', '徐州', '泰州',
											'连云港', '南通', '淮安', '盐城', '扬州',
											'镇江', '宿迁', '常州' ]
								} ],
						yAxis : [ {
							type : 'value',
							axisLabel : {
								formatter : '{value} 次'
							}
						} ],
						series : [
								{
									name : '月服务人次',
									type : 'bar',
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,1)',
											label : {
												show : true
											}
										}
									},
									data : dataMap.v['1']
								},
								{
									name : '月办理业务数量',
									type : 'bar',
									xAxisIndex : 1,
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,0.5)',
											label : {
												show : true,
												formatter : function(p) {
													return p.value > 0 ? (p.value + '\n')
															: '';
												}
											}
										}
									},
									data : dataMap.v2['1']
								} ]
					},
					{
						series : [
								{
									name : '月服务人次',
									type : 'bar',
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,1)',
											label : {
												show : true
											}
										}
									},
									data : dataMap.v['2']
								},
								{
									name : '月办理业务数量',
									type : 'bar',
									xAxisIndex : 1,
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,0.5)',
											label : {
												show : true,
												formatter : function(p) {
													return p.value > 0 ? (p.value + '\n')
															: '';
												}
											}
										}
									},
									data : dataMap.v2['2']
								} ]
					},
					{
						series : [
								{
									name : '月服务人次',
									type : 'bar',
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,1)',
											label : {
												show : true
											}
										}
									},
									data : dataMap.v['3']
								},
								{
									name : '月办理业务数量',
									type : 'bar',
									xAxisIndex : 1,
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,0.5)',
											label : {
												show : true,
												formatter : function(p) {
													return p.value > 0 ? (p.value + '\n')
															: '';
												}
											}
										}
									},
									data : dataMap.v2['3']
								} ]
					},
					{
						series : [
								{
									name : '月服务人次',
									type : 'bar',
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,1)',
											label : {
												show : true
											}
										}
									},
									data : dataMap.v['4']
								},
								{
									name : '月办理业务数量',
									type : 'bar',
									xAxisIndex : 1,
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,0.5)',
											label : {
												show : true,
												formatter : function(p) {
													return p.value > 0 ? (p.value + '\n')
															: '';
												}
											}
										}
									},
									data : dataMap.v2['4']
								} ]
					},
					{
						series : [
								{
									name : '月服务人次',
									type : 'bar',
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,1)',
											label : {
												show : true
											}
										}
									},
									data : dataMap.v['5']
								},
								{
									name : '月办理业务数量',
									type : 'bar',
									xAxisIndex : 1,
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,0.5)',
											label : {
												show : true,
												formatter : function(p) {
													return p.value > 0 ? (p.value + '\n')
															: '';
												}
											}
										}
									},
									data : dataMap.v2['5']
								} ]
					},
					{
						series : [
								{
									name : '月服务人次',
									type : 'bar',
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,1)',
											label : {
												show : true
											}
										}
									},
									data : dataMap.v['6']
								},
								{
									name : '月办理业务数量',
									type : 'bar',
									xAxisIndex : 1,
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,0.5)',
											label : {
												show : true,
												formatter : function(p) {
													return p.value > 0 ? (p.value + '\n')
															: '';
												}
											}
										}
									},
									data : dataMap.v2['6']
								} ]
					},
					{
						series : [
								{
									name : '月服务人次',
									type : 'bar',
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,1)',
											label : {
												show : true
											}
										}
									},
									data : dataMap.v['7']
								},
								{
									name : '月办理业务数量',
									type : 'bar',
									xAxisIndex : 1,
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,0.5)',
											label : {
												show : true,
												formatter : function(p) {
													return p.value > 0 ? (p.value + '\n')
															: '';
												}
											}
										}
									},
									data : dataMap.v2['7']
								} ]
					},
					{
						series : [
								{
									name : '月服务人次',
									type : 'bar',
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,1)',
											label : {
												show : true
											}
										}
									},
									data : dataMap.v['8']
								},
								{
									name : '月办理业务数量',
									type : 'bar',
									xAxisIndex : 1,
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,0.5)',
											label : {
												show : true,
												formatter : function(p) {
													return p.value > 0 ? (p.value + '\n')
															: '';
												}
											}
										}
									},
									data : dataMap.v2['8']
								} ]
					},
					{
						series : [
								{
									name : '月服务人次',
									type : 'bar',
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,1)',
											label : {
												show : true
											}
										}
									},
									data : dataMap.v['9']
								},
								{
									name : '月办理业务数量',
									type : 'bar',
									xAxisIndex : 1,
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,0.5)',
											label : {
												show : true,
												formatter : function(p) {
													return p.value > 0 ? (p.value + '\n')
															: '';
												}
											}
										}
									},
									data : dataMap.v2['9']
								} ]
					},
					{
						series : [
								{
									name : '月服务人次',
									type : 'bar',
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,1)',
											label : {
												show : true
											}
										}
									},
									data : dataMap.v['10']
								},
								{
									name : '月办理业务数量',
									type : 'bar',
									xAxisIndex : 1,
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,0.5)',
											label : {
												show : true,
												formatter : function(p) {
													return p.value > 0 ? (p.value + '\n')
															: '';
												}
											}
										}
									},
									data : dataMap.v2['10']
								} ]
					},
					{
						series : [
								{
									name : '月服务人次',
									type : 'bar',
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,1)',
											label : {
												show : true
											}
										}
									},
									data : dataMap.v['11']
								},
								{
									name : '月办理业务数量',
									type : 'bar',
									xAxisIndex : 1,
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,0.5)',
											label : {
												show : true,
												formatter : function(p) {
													return p.value > 0 ? (p.value + '\n')
															: '';
												}
											}
										}
									},
									data : dataMap.v2['11']
								} ]
					},
					{
						series : [
								{
									name : '月服务人次',
									type : 'bar',
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,1)',
											label : {
												show : true
											}
										}
									},
									data : dataMap.v['12']
								},
								{
									name : '月办理业务数量',
									type : 'bar',
									xAxisIndex : 1,
									itemStyle : {
										normal : {
											color : 'rgba(193,35,43,0.5)',
											label : {
												show : true,
												formatter : function(p) {
													return p.value > 0 ? (p.value + '\n')
															: '';
												}
											}
										}
									},
									data : dataMap.v2['12']
								} ]
					}

			]
		};

	var chartOption2 = {
			
			
			title : {
				text : '服务满意度分析',
				subtext : ''
			},
			tooltip : {
		        trigger: 'axis',
		        showDelay: 0  ,           // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
		        formatter: function (params) {
		            var res = params[0].name;
		            res += '<br/>' + params[0].seriesName +':';
		            res +=  params[0].value + '秒';
		            return res;
		        }
		    },
		    legend: {
		        
		        data:['平均等待时间']
		    },
		xAxis : [ {
				type : 'category',
				data : [ '南京', '苏州', '无锡', '徐州', '泰州',
							'连云港', '南通', '淮安', '盐城', '扬州',
							'镇江', '宿迁', '常州' ]
				
			} ],
			yAxis : [
			         {
			             type : 'value',
			             
			             axisLabel: {
			                 formatter: function (v) {
			                     return v + ' 秒';
			                 }
			             }
			             
			         }
			     ],
			     series : [
			             {
			            	 name:'平均等待时间',
			                 type:'bar',
			                 itemStyle:{
			                	 barBorderWidth:10,
		                         normal:{color:'#4E7EC5'} //为每个柱设置颜色
		                        },
			            	 data : dataMap.v4['1']
			             }
				]

		}
	
	var chartOption3 = {
			tooltip : {
		        trigger: 'axis',
		        showDelay: 0 ,            // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
		        formatter: function (params) {
		            var res = params[0].name;
		            res += '<br/>' + params[0].seriesName +':';
		            res +=  params[0].value + '分';
		            return res;
		        }
		    },
		    legend: {
		    	
		        data:['月满意度']
		    },
		xAxis : [ {
				type : 'category',
				data : [ '南京', '苏州', '无锡', '徐州', '泰州',
							'连云港', '南通', '淮安', '盐城', '扬州',
							'镇江', '宿迁', '常州' ]
				
			} ],
			yAxis : [
			         {
			             type : 'value',
			             
			             axisLabel: {
			                 formatter: function (v) {
			                     return v + ' 分'
			                 }
			             },
			             
			         }
			     ],
			     series : [
			             {
			            	 name:'月满意度',
			                 type:'bar',
			                 itemStyle:{
			                	 barBorderWidth:10
		                            //normal:{color:'gray'} //为每个柱设置颜色
		                        },
			            	 data : dataMap.v3['1']
			             }  
			             
				]

		}



		require.config({
			paths : {
				echarts : '${ctx}/assets/echarts/build/dist'
			}
		});
		require([ 'echarts', 'echarts/chart/bar', 'echarts/chart/scatter',
				'echarts/chart/pie', 'echarts/chart/map', 'echarts/chart/tree',
				'echarts/chart/funnel', 'echarts/chart/gauge',
				'echarts/chart/wordCloud', 'echarts/chart/line'

		], function(ec) {
			//江苏省税务业务办理事项统计

			var chart1 = ec.init(document.getElementById('chart1'));
			chart1.setOption(chartOption1, true);

			var chart2 = ec.init(document.getElementById('chart2'));
			chart2.setOption(chartOption2, true);
			var chart3 = ec.init(document.getElementById('chart3'));
			chart3.setOption(chartOption3, true);


			chart2.connect([chart3]);
			chart3.connect([chart2]);

			setTimeout(function (){
			    window.onresize = function () {
			    	chart2.resize();
			    	chart3.resize();
			    }
			},200)



		})
	</script>
</body>
</html>
